<template>
    <div class="flex-main">
        <div class="flex-body" :style="{backgroundImage:'url('+require('@/assets/images/pinBgimg@2x.png')+')'}">
            <div class="m-pinBox">
                <div class="m-pingoods">
                    <img :src="spellingDetail.BigPic || require('@/assets/images/coverDefault.jpg')" alt="" width="100%">
                    <div>
                        {{spellingDetail.Name || '美业通商品'}}
                        <span>&yen;{{spellingDetail.Price}}</span>
                    </div>
                </div>
                <p class="m-pin-num">还差<b>{{number}}</b>人，人满即可拼团成功</p>
                <div class="m-pinHead-list">
                    <span v-for="(item,index) in spellingList" :key="index">
                        <img :src="item.wximage || require('@/assets/images/defaultImg@2x.png')" alt="">
                        <em v-if="item.is_leader==1">团长</em>
                    </span>
                </div>
                <div class="tc">
                    <button class="m-visit-friend">点击邀请好友</button>
                </div>
                <div class="m-count-time mb">
                    <p class="mb">{{time}}</p>
                    <img src="@/assets/images/icon2@2x.png" alt="" width="60%">
                </div>
                
            </div>
            <!-- <div class="m-spelling-list">
                <spelling-item class="m-spelling-item"
                v-for="(item,index) in 3" :key="index"></spelling-item>
            </div> -->
        </div>
    </div>
</template>
<script>
import {spellingShareDetail} from '@/api/spelling';
import {countDown} from '@/utils/utils';
import { setInterval, clearInterval } from 'timers';
export default {
    name:'',
    data () {
        return {
            id:'',
            spellingDetail:'',      //拼团商品详情
            spellingList:'',        //拼团成员
            number:0,       //缺人数
            time:'',         //失效时间
        }
    },
    components:{
        spellingItem:()=>import('@/model/spelling/spellingItem2'),
    },
    methods: {
        // 获取拼团详情
        getSpellingdetail() {
            let param = {
                order:this.orderNo,
                customer_spelling_id:this.id,
                customer_id:this.$utils.uid
            }
            spellingShareDetail(param).then((result) => {
                this.spellingDetail = result.detail;        //拼团商品详情
                this.spellingList = result.list;        //拼团成员
                this.number = result.number;
                this.downtime(result.time);
            }).catch((err) => {
                
            });
        },
        // 倒计时
        downtime(time) {
            if(time<0){
                this.time = '活动已结束';
                return;
            }
            let timer = null;
            timer = setInterval(()=>{
                let day = 0,
                    hour = 0,
                    minute = 0,
                    second = 0;
                if(time<=0){clearInterval(timer); return;}
                day = Math.floor(times / (60 * 60 * 24));
                hour = Math.floor(times / (60 * 60)) - (day * 24);
                minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                if (day <= 9) day = '0' + day;
                if (hour <= 9) hour = '0' + hour;
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                this.time = day+"天:"+hour+"："+minute+"："+second+' 后失效';
                time --;
                console.log(time);
            },1000);
        },
    },
    mounted() {
        this.id = this.$route.query.id;
        this.getSpellingdetail();
    }
}
</script>
<style lang="less" scoped src="@/less/spelling/spellingShare.less"></style>
